
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>

<%-- loginRegister.jsp 顶部添加在线统计 --%>
<div style="position: absolute; top: 10px; right: 10px;">
    当前在线人数：${applicationScope.activeSessions}
</div>

<head>
    <title>登录/注册</title>
    <style>
        .container { max-width: 800px; margin: 50px auto; padding: 20px; }
        .form-box {
            background: #f9f9f9;
            border: 1px solid #ddd;
            padding: 20px;
            margin: 20px auto;
            width: 350px;
        }
        .form-title { text-align: center; margin-bottom: 15px; }
        .input-group { margin: 10px 0; }
        .error { color: red; margin: 5px 0; }
        .switch-buttons { text-align: center; margin: 20px 0; }
    </style>

    <script>
        function showForm(formType) {
            document.getElementById('loginBox').style.display =
                formType === 'login' ? 'block' : 'none';
            document.getElementById('registerBox').style.display =
                formType === 'register' ? 'block' : 'none';
        }
    </script>

</head>
<body onload="showForm('login')">
<div class="container">
    <div class="switch-buttons">
        <button onclick="showForm('login')">登录</button>
        <button onclick="showForm('register')">注册</button>
    </div>

    <!-- 登录表单 -->
    <div class="form-box" id="loginBox">
        <div class="form-title"><h3>用户登录</h3></div>
        <c:if test="${not empty requestScope.loginError}">
            <div class="error">${requestScope.loginError}</div>
        </c:if>
        <form action="LoginServlet" method="post">
            <div class="input-group">
                <label>用户名：</label>
                <input type="text" name="username" required>
            </div>
            <div class="input-group">
                <label>密码：</label>
                <input type="password" name="password" required>
            </div>
            <div class="input-group">
                <label>验证码：</label>
                <input type="text" name="captcha" style="width:80px;" required>
                <img src="CaptchaServlet" onclick="this.src='CaptchaServlet?'+Math.random()"
                     style="vertical-align: middle; cursor: pointer;">
            </div>
            <div class="input-group">
                <button type="submit">登录</button>
            </div>
        </form>
    </div>

    <!-- 注册表单 -->
    <div class="form-box" id="registerBox" style="display:none;">
        <div class="form-title"><h3>用户注册</h3></div>
        <c:if test="${not empty requestScope.registerError}">
            <div class="error">${requestScope.registerError}</div>
        </c:if>
        <form action="RegisterServlet" method="post">
            <div class="input-group">
                <label>用户名：</label>
                <input type="text" name="username" required>
            </div>
            <div class="input-group">
                <label>密码：</label>
                <input type="password" name="password" required>
            </div>
            <div class="input-group">
                <label>验证码：</label>
                <input type="text" name="captcha" style="width:80px;" required>
                <img src="CaptchaServlet" onclick="this.src='CaptchaServlet?'+Math.random()"
                     style="vertical-align: middle; cursor: pointer;">
            </div>
            <div class="input-group">
                <button type="submit">注册</button>
            </div>
        </form>
    </div>
</div>
</body>


</html>
